<template>
  <div class="holy-grail">
    <AppHeader />

    <div class="content-container">
      <SidebarLeft />

      <main class="main-content">
        <RouterView /> <!-- 路由出口 -->
      </main>

      <SidebarRight />
    </div>

    <AppFooter />
  </div>
</template>

<script setup>
import AppHeader from '@/layout/AppHeader.vue'
import AppFooter from '@/layout/AppFooter.vue'
import SidebarLeft from '@/layout/SidebarLeft.vue'
import SidebarRight from '@/layout/SidebarRight.vue'
</script>

<style scoped>
.holy-grail {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content-container {
  display: flex;
  flex: 1;
}

.main-content {
  flex: 1;
  padding: 1.5rem;
  background: #fff;
}

/* 响应式设计 - 移动优先 */
@media (min-width: 992px) {
  .content-container {
    /* 桌面布局：左中右三列 */
    flex-wrap: nowrap;
  }

  .main-content {
    order: 2; /* 主内容在中间 */
    padding: 2rem;
  }

  .left-sidebar {
    order: 1; /* 左侧边栏在左 */
    flex: 0 0 250px;
  }

  .right-sidebar {
    order: 3; /* 右侧边栏在右 */
    flex: 0 0 300px;
    border-left: 1px solid #eee;
  }
}

@media (max-width: 991px) {
  .content-container {
    flex-direction: column;
  }

  .left-sidebar,
  .right-sidebar {
    flex: 0 0 auto;
  }

  .right-sidebar {
    border-top: 1px solid #eee;
    order: 3; /* 在小屏幕上导航菜单在最后 */
  }
}
</style>